<template>
  <div>
    <div>
      <FilterTable ref="table" height="400px" :isMemoryPagination="true" :columns="columns" :dataSource="tableDataList" :params="fetchParams" :onColumnsChange="columns => (this.columns = columns)" />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer">返回</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { returnHistory } from '@/api/customerRepair/afterSaleVisit/resultEntry';
import { getAllUser } from '@/api/customerRepair/activityVisit/resultEntry';
import { getProvince, getCitys, getDistrict, getRegion } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { arrayObjDeWeight } from '@/utils/index';

export default {
  name: 'visitHistory',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    this.BaseTable = null;
    this.allData = {};
    return {
      fetchParams: { roNo: this.formData.roNo },
      columns: this.createTableColumns(),
      regionList: [],
      tableDataList: [],
      userList: []
    };
  },
  computed: {},
  created() {
    this.getResData();
    this.getAllUser();
    this.getProvine();
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '结束跟踪',
          dataIndex: 'endTracking',
          width: 150,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.endTracking, 1004)}</span>;
          }
        },
        {
          title: '问卷名称',
          dataIndex: 'questionnaire',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '跟踪员',
          dataIndex: 'stalker',
          width: 150,
          render: props => {
            return <span>{this.getText('user', props.row.stalker)}</span>;
          }
        },
        {
          title: '跟踪日期',
          dataIndex: 'trackDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '跟踪状态',
          dataIndex: 'trackStatus',
          width: 150,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.trackStatus, 8058)}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          width: 150
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          width: 150
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          width: 150
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          width: 150
        },
        {
          title: '开票日期',
          dataIndex: 'hfdh',
          width: 150
        },
        {
          title: '性别',
          dataIndex: 'gender',
          width: 150,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.gender, 8012)}</span>;
          }
        },
        {
          title: '地址',
          dataIndex: 'address',
          width: 180,
          showOverflowTooltip: true
        },
        {
          title: '联系人电话',
          dataIndex: 'CONTACTOR_PHONE',
          width: 150
        },
        {
          title: '联系人手机',
          dataIndex: 'CONTACTOR_MOBILE',
          width: 150
        },
        {
          title: '省份',
          dataIndex: 'province',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.province)}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'city',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.city)}</span>;
          }
        },
        {
          title: '区县',
          dataIndex: 'district',
          width: 150,
          render: props => {
            return <span>{this.getText('region', props.row.district)}</span>;
          }
        },
        {
          title: 'E-MAIL',
          dataIndex: 'email',
          showOverflowTooltip: true
        },
        {
          title: '车主性质',
          dataIndex: 'ownerProperty',
          width: 150,
          render: props => {
            return <span>{this.createDictText(props.row.ownerProperty, '8011')}</span>;
          }
        },
        {
          title: '婚姻状况',
          dataIndex: 'ownerMarriage',
          width: 100,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.ownerMarriage, 8018)}</span>;
          }
        },
        {
          title: '家庭年收入',
          dataIndex: 'familyIncome',
          width: 100,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.familyIncome, 1290)}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          width: 150
        }
      ];
    },
    mounted() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    async getResData(val) {
      let parm = this.fetchParams;
      let res = await returnHistory(parm);
      if (res.resultCode == 200) {
        this.tableDataList = res.data;
      }
      // this.fetchParams = Object.assign({}, parm, { xhrAbort: false });
    },
    async getAllUser() {
      const res = await getAllUser();
      let data = arrayObjDeWeight(res.data, 'userId'); // 人员去重(解决前端报错)
      this.userList = data.map(x => ({
        value: x.userId,
        text: x.employeeName
      }));
    },
    // 关闭页面
    closeDrawer() {
      this.$emit('close', false);
    },
    async getProvine() {
      const allRegion = await getRegion();
      this.regionList = allRegion.data.map(x => ({ value: x.regionId, text: x.regionName }));
    },
    getText(type, val) {
      if (type === 'region') {
        return this.regionList.find(x => x.value === val) ? this.regionList.find(x => x.value === val).text : '';
      } else if (type === 'user') {
        return this.userList.find(x => x.value === val) ? this.userList.find(x => x.value === val).text : '';
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
